﻿/**
 * @filename BPlayerUI.js
 * @author baboo(istxwang@gmail.com)
 */
var BPlayerUI = $({
	__init : function (sets) {
		sets = $.extend({
			bigZoom : 1.5,
			bigCode : $.Event.Keys.RETURN,
			moonOpacity : 0.8,
			class_player_bar : 'player-bar',
			class_player_body : 'player-body',
			class_set_panel : 'set-panel',
			class_set_slider_drag : 'slider-dragger',
			class_cmd_btn : 'btn',
			zIndex : 2000
		}, sets);
		var $player = sets.$player, $masker = sets.$masker;
		var $player_bar = $player.find('.'+sets.class_player_bar);
		var $player_body = $player.find('.'+sets.class_player_body);
		var $set_panel = $player.find('.'+sets.class_set_panel);
		var moonOpacity = sets.moonOpacity;
		var moonEffect = $.effect({
			duration: 0.5,
			onStart : function () {
				$masker.opacity(0);
				$masker.show();	
				$masker.moonEffect = true;
			},
			render : function (pos) {
				$masker.opacity(pos * sets.moonOpacity);
			},
			onFinish : function () {
				$masker.moonEffect = false;
			}
		});
		var sunEffect = $.effect({
			duration: 0.5,
			onStart : function () {
				$masker.sunEffect = true;
			},
			render : function (pos) {
				$masker.opacity(sets.moonOpacity - sets.moonOpacity * pos);
			},
			onFinish : function () {
				$masker.hide();	
				$masker.sunEffect = false;
			}
		});
		new $.SDrag($player, $player_bar, {cursor:'normal', onEndDrag: function ($e) {
				if (parseInt($e.css('left'), 10) < 0) $e.css('left:0px');
				if (parseInt($e.css('top'), 10) < 0) $e.css('top:0px');
			}});
		$player.find('*.'+sets.class_cmd_btn).mousedown((function(event){
			var $e = $($(event, 'element'));
			if ($e.$('$$class', '@'+sets.class_cmd_btn)) {
				$(event, 'stop');
				setTimeout(function(){$e[0].blur();}, 25);
				//$e[0].blur();
				var cmd = ($e.$('class').match(/cmd-(\w+)/) || [0, 0])[1];
				if (cmd) {
					cmd = cmd + 'Cmd';
					if (this[cmd]) {						
						this[cmd]($e);	
					}
				}
			}
		}).bindAsEventListener(this));
		if (sets.cmds) {
			for (var pro in sets.cmds) {
				if (sets.cmds.hasOwnProperty(pro)) {
					this[pro + 'Cmd'] = sets.cmds[pro];	
				}	
			}	
		}
		var l = $player.$('offsetLeft');
		var t = $player.$('offsetTop');
		$player.css({
			position : 'absolute',
			zIndex : sets.zIndex,
			left : l + 'px',
			top : t + 'px'
		});
		$.observe(document, 'keydown', this.__keydown.bindAsEventListener(this));
		this.$player = $player;
		this.$player_body = $player_body;
		this.$set_panel = $set_panel;
		this.barHeight = $player_bar.$('offsetHeight');
		this.originWidth = $player_body.$('offsetWidth');
		this.originHeight = $player_body.$('offsetHeight');
		this.originLeft = l;
		this.originTop = t;
		this.sets = sets;
		this.$masker = $masker;
		this.moonEffect = moonEffect;
		this.sunEffect = sunEffect;
		this.zoomTimes = 1;
		this.dE = document.documentElement;
	},
	__initSetPanel : function ($set_panel) {
		if (this.setPanelInited) return;
		this.setPanelInited = true;
		var _t = this;
		var $big_slider = $set_panel.find('.set-big');
		if ($big_slider.length) {
			var $big_show = $set_panel.find('.set-big-show');
			var bigSlider = new $.Slider({
				$tracker : $big_slider,
				$dragger : $big_slider.find('.'+_t.sets.class_set_slider_drag),
				range : [1, 2],
				step : 0.1,
				onChange : function (val) {
					_t.sets.bigZoom = val;
					var show = Math.round(val * 10) + '';
					show = show.charAt(0) + '.' + show.charAt(1);
					$big_show.html(show);
					_t.$player.find('.cmd-big').$('title', show + '倍大小');
				}
			});
			bigSlider.toPos(false, _t.sets.bigZoom - 1);
			bigSlider.sets.onChange(_t.sets.bigZoom);
		}
		var $moon_slider = $set_panel.find('.set-moon');
		if ($moon_slider.length) {
			var $moon_show = $set_panel.find('.set-moon-show');
			var moonSlider = new $.Slider({
				$tracker : $moon_slider,
				$dragger : $moon_slider.find('.'+_t.sets.class_set_slider_drag),
				range : [10, 100],
				step : 1,
				onChange : function (val) {
					$moon_show.html(val);
					_t.sets.moonOpacity = val/100;
					if (_t.__isMoon()) {
						_t.$masker.opacity(_t.sets.moonOpacity);
					}
				}
			});
			var defaultMoonOpacity = Math.round(_t.sets.moonOpacity * 100);
			moonSlider.toPos(false, (defaultMoonOpacity - 10) / (100 - 10));
			moonSlider.sets.onChange(defaultMoonOpacity);
		}
	},
	closeSetPanelCmd : function () {
		this.setCmd();
	},
	moonCmd : function ($e) {
		if (this.__isMoon()) return;
		$e.$('$class', 'cmd-moon=>cmd-sun').$('title', '白天');	
		var $masker = this.$masker;
		if ($masker.sunEffect) {
			$.Effect.remove(this.sunEffect);
			$masker.sunEffect = false;
		}
		$.Effect.add(this.moonEffect);
	},
	sunCmd : function ($e) {
		if (!this.__isMoon()) return;
		$e.$('$class', 'cmd-sun=>cmd-moon').$('title', '夜晚');
		var $masker = this.$masker;
		if ($masker.moonEffect) {
			$.Effect.remove(this.moonEffect);
			$masker.moonEffect = false;	
		}
		$.Effect.add(this.sunEffect);
	},
	maxCmd : function ($e) {
		$e.$('$class', 'cmd-max=>cmd-restore').$('title', '还原');
		var dw = document.documentElement.clientWidth, dh = document.documentElement.clientHeight, $player = this.$player, $player_body = this.$player_body;
		this.maxStatus = true;
		this.restoreWidth = $player.$('offsetWidth');
		this.restoreHeight = parseInt($player_body.css('height'), 10) || $player_body.$('offsetHeight');
		this.restoreLeft = parseInt($player.css('left'), 10);
		this.restoreTop = parseInt($player.css('top'), 10);
		$player.css({
			width: dw + 'px',
			left : this.dE.scrollLeft + 'px',
			top : this.dE.scrollTop + 'px'
		});
		$player_body.css({
			height: (dh - this.barHeight) + 'px'
		});
	},
	restoreCmd : function ($e) {
		$e.$('$class', 'cmd-restore=>cmd-max').$('title', '最大化');
		if (this.maxStatus) {
			this.maxStatus = false;
			this.$player.css({
				width : this.restoreWidth + 'px',
				left : this.restoreLeft + 'px',
				top : this.restoreTop + 'px'
			});	
			this.$player_body.css({
				height : this.restoreHeight + 'px'
			});
			//this.moveTo(this.restoreLeft, this.restoreTop);
		}
	},
	returnCmd : function () {
		this.zoom(1);
		this.moveTo(this.originLeft, this.originTop);
		if (this.__isMoon()) {
			this.sunCmd(this.$player.find('*.cmd-sun'));	
		}
	},
	setCmd : function () {
		var setPanel = this.$set_panel;
		if (!setPanel.length) return;
		if (this.setPanelShowed) {
			this.setPanelShowed = false;
			setPanel.hide();
		} else {
			this.setPanelShowed = true;
			setPanel.show();
			this.__initSetPanel(this.$set_panel);
		}
	},
	bigCmd : function () {
		if (this.sets.moonWhenBig && ! this.__isMoon()) {
			this.moonCmd(this.$player.find('*.cmd-moon'));
		}
		this.zoom(this.sets.bigZoom, this.sets.centerWhenBig);
	},
	centerCmd : function () { this.moveToCenter() },
	__isMoon : function () {
		return this.$player.find('*.cmd-sun').length;
	},
	__keydown : function (event) {
		var keyCode = $(event, 'keyCode');
		//bigCmd
		if (event.ctrlKey && keyCode == this.sets.bigCode) {
			return this.bigCmd();	
		}
		//homeCmd
		if (keyCode == $.Event.Keys.ESC) return this.returnCmd();
	},
	zoom : function (times, moveToCenter) {
		if (!this.maxStatus && this.zoomTimes == times) {
			if (moveToCenter) this.moveToCenter();
			return;
		}
		this.zoomTimes = times;
		if (this.maxStatus) {
			this.maxStatus = false;	
			this.restoreCmd(this.$player.find('*.cmd-restore'));
		}
		var w = this.originWidth * times, h = this.originHeight * times;
		this.$player.css({width: w + 'px'});
		this.$player_body.css({height: h + 'px'});
		if (moveToCenter) this.moveToCenter();
	},
	moveTo : function (x, y) {
		var $player = this.$player;
		var originX = parseInt($player.css('left'), 10) || 0, originY = parseInt($player.css('top'), 10) || 0;
		var deltaX = x - originX, deltaY = y - originY;
		var effect = $.effect($.extend({
			duration : 0.5,
			render : function (pos) {
				$player.css({
					left : Math.round(originX + (pos * deltaX)) + 'px',
					top : Math.round(originY + (pos * deltaY)) + 'px'
				});
				//$player.$('$scrollIntoView');
			},
			onFinish : function () {
				$player.moveEffect = null;	
			}
		}, this.sets.moveEffect || {}));
		if ($player.moveEffect) {
			$.Effect.remove($player.moveEffect);	
		}
		$.Effect.add(effect);
		$player.moveEffect = effect;
	},
	moveToCenter : function () {
		var dw = this.dE.clientWidth, dh = this.dE.clientHeight
		w = this.$player.$('offsetWidth'), h = this.$player.$('offsetHeight'),
		l = Math.max(0, this.dE.scrollLeft + Math.floor((dw - w) / 2)), 
		t = Math.max(0, this.dE.scrollTop + Math.floor((dh - h) / 2));
		this.moveTo(l, t);
	}
});